@import url("//at.alicdn.com/t/font_399131_qq3ppyyxz17qr529.css");
@import "base.scss";
@import "animate.scss";
@import "joModal.scss";

$mainColor:#23a8f5;
$white:#fff;
$borderColor:#e4e4e4;
$leftWidth:180px;

/*unit*/
.err{
    display:block;
    width:100%;
    text-align:left;
    color:red;
    padding-top:3px;

    i{
        margin-right:5px;
    }
}

.errBorder{
    border:1px solid red!important;
    box-shadow:none!important;
}

textarea{
    resize:none;
    outline:0;
}

input{
    padding-left:20px;
    padding-right:20px;
    box-sizing:border-box;
    
    &:focus{
        border-color:$mainColor;
        box-shadow:0 0 3px $mainColor;
    }
}

.input-icon{
    position:relative;
    white-space: nowrap;
    
    input[type="text"]+i{
        position:absolute;
        top:50%;
        margin-top:-14px;
        right:15px;
        font-size:20px;
        color:#999;
        
        &:hover{
            color:$mainColor;
            cursor:pointer;
        }
    }
}

//分页样式（pagination）
.pagination{
    width:auto;
    height:30px;
    line-height:30px;
    text-align:center;
    
    a{
        margin-left:10px;
    }
    
    input{
        margin-left:10px;
        width:60px;
        height:30px;
        border:1px solid #999;
        text-align:center;
        padding:0 10px; 
        
        &:focus{
            border-color:$mainColor;
            box-shadow:0 0 3px $mainColor;
        }
    }
    
}

/*-----------------------------------
 * header (include user message)
 * 头部样式
 * 包含用户头像和账户显示
 -----------------------------------*/
.header{
    width:100%;
    height:60px;
    /*
    position:fixed;
    top:0;
    left:0;
    background-color:$white;*/
    border-bottom:1px solid $borderColor;
    overflow:hidden;
    
    .avatar{
        height:100%;
        padding:10px 50px 10px 0;
        line-height:40px;
        float:right;
        box-sizing:border-box;
        
        span{
            display:inline-block;
            width:40px;
            height:40px;
            font-size:18px;
            text-align:center;
            color:$white;
            background-color:$mainColor;
        }
        
        span,.user-pic{border-radius:50%;}
        
        .avatar_show{
            margin-left:10px;
        }
        
    }
}

/*-----------------------------------
 * left-aside(nav & logo)
 * 左栏样式
 * 包含导航和logo的样式
 -----------------------------------*/
.left-aside{
    width:$leftWidth;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    background-color:#2f2f2f;
    z-index:99;
    
    .logo{
        display:block;
        width:$leftWidth;
        height:60px;
        background-color:$white;
    }
    
    .navbar{height:100%;}
}

ul.menu{
    width:100%;
    min-height:100%;
    margin-bottom:1px;
    padding-top:15px;
    box-sizing:border-box;
    //background-color:red;
    
    li{
        width:100%;
        //height:32px;
        //line-height:32px;
        color:#eff0f4;
        box-sizing:border-box;
        
        a{
            width:100%;
            height:32px;
            line-height:32px;
            padding-left:30px;
            padding-right:30px;
            display:block;
            cursor:pointer;
            color:#fff;
            position:relative;
            //background-color:red;
            box-sizing:border-box;
            
            &>i:first-child{
                position:relative;
                top:1px;
            }

            &:hover{
                color:$mainColor;
                background-color:rgba(255,255,255,.3);
            }
            
            &:hover>i.right-arrow{ display:block;}
            
            span{
                margin-left:8px;
                letter-spacing:1px;
            }
        }
        
        .right-arrow{
            font-size:14px;
            position:absolute;
            right:20px;
            top:0;
            display:none;
            //color:$mainColor;
        }
        
        &>ul{
            background-color:#2F2F2F;
            display:none;
        }
        
        .rotate{
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
        }
        
    }
    
    .active{
        color:$mainColor;
        background-color:rgba(255,255,255,.3);
        
        i.right-arrow{display:block;}
    }
}

/*------------------------------------
 * main (header & content)
 * 右栏页面架构主要样式
 * 包含头部和内容
-------------------------------------*/
.main{
    width:100%;
    height:100%;
    overflow:hidden;
    box-sizing:border-box; 
    position:fixed;
    left:0;
    top:0;
    //z-index:1;
    //padding-top:60px;
    
    
    .main-wrapper{
        width:100%;
        height:100%; 
        //padding-left:$leftWidth;
        //box-sizing:border-box;     
    }
    
    .content{ 
        width:100%;
        min-height:100%;
        padding:20px;
        margin-bottom:1px;  //撑开内容，使父级main始终显示美化滚动条
        box-sizing:border-box;
        background:#eff0f4;
        
        .container{
            width:100%;
            background-color:#fff;
            border:1px solid $borderColor;
            padding:0;
            margin:0;
        }
         
    }
    
}

/*-------------------------------------------------
 * container
 * 正文内容样式
 -------------------------------------------------*/
.con-header{
    height:42px;
    line-height:42px;
    border-bottom:1px solid $borderColor;
}

.folderbar{
    padding-left:20px;
    
    a{
        color:$mainColor;
        float:left;
        padding:0 10px;
        position:relative;
        
        &:before{
            display:block;
            content:"/";
            color:$mainColor;
            position:absolute;
            left:-2px;
        }
        
        &:first-child::before{
            content:"";
        }
        
        &:nth-child(2)::before{
            content:"|";
        }
        
        &:last-child{
            color:#333;
            cursor:text;
        }
    }
}

.con-body{
    padding:20px;
}

.con-footer{
    width:100%;
}

.input-row{
    margin-top:20px;
    height:36px;
    line-height:36px;
    
    &:after{
        display:block;
        content:"";
        height:0;
        clear:both;
    }
    
    label{
        display:inline-block;
        letter-spacing: 1px;
        float:left;
        
        &>span{
            display:inline-block;
            width:90px;
        }
    }
    
    input{
        width:360px;
        height:36px;
        line-height:36px;
        border:1px solid #c9c9c9;
        border-radius:4px;
        margin:0;
        float:left;
        
        &:focus{
            border-color:$mainColor;
            box-shadow:0 0 3px $mainColor;
        }
    }
}

.select{
    position:relative;
    
    &:after{
        content:"▼";
        color:#999;
        position:absolute;
        right:15px;
        top:50%;
        transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
    }
    
    select{
        width:360px;
        height:36px;
        line-height:36px;
        padding-left:20px;
        padding-right:20px;
        border:1px solid #c9c9c9;
        border-radius:4px;
        
        /*很关键：将默认的select选择框样式清除*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        
        &:focus{
            border-color:$mainColor;
            box-shadow:0 0 3px $mainColor;
        }
    }
}

.submit{
    width:120px;
    height:41px;
    border-radius:4px;
    border:0;
    outline:0;
    background-color:$mainColor;
    color:$white;
    margin-top:20px;
    position:relative;
    left:90px;
    overflow:hidden;
    cursor:pointer;
    
    .btn-text{
        width:100%;
        position:absolute;
        top:0;
        left:0;
        
        span{
            display:block;
            width:100%;
            height:41px;
            line-height:41px;   
            text-align:center;
            
            i{font-size:21px;}
        }
    }
}





